<template>
  <div class="main">
    <!--头部搜索栏-->
    <van-sticky :z-index="9999">
      <HxmHeader></HxmHeader>
      <div class="navbar">
        <ul>
          <li
            class="item"
            @click="changeCurrentIndex(-1)"
            :class="currentIndex === -1 ? 'active' : ''"
          >
            推荐
          </li>
          <li
            v-for="(item, index) in homeStore.categoryList"
            :key="index"
            class="item"
            :class="currentIndex === index ? 'active' : ''"
            @click="
              changeCurrentIndex(index, item.extra.operationResource.categoryId)
            "
          >
            {{ item.extra.operationResource.categoryName }}
          </li>
          
        </ul>
        <div class="pull">
          <van-icon
            :name="pull ? 'arrow-up' : 'arrow-down'"
            @click="changePull"
          />
        </div>
      </div>
    </van-sticky>
    <!--下拉菜单-->
    <van-sticky :z-index="99999">
      <div class="pullmenu" v-show="pull">
        <div class="top">
          <p>全部分类</p>
          <van-icon
            :name="pull ? 'arrow-up' : 'arrow-down'"
            @click="changePull"
          />
        </div>
        <div class="menu">
          <span
            :id="currentIndex === -1 ? 'active' : ''"
            @click="changeCurrentIndex(-1)"
            class="btn"
          >
            推荐
          </span>
          <span
            v-for="(item, index) in homeStore.categoryList"
            :key="index"
            :id="currentIndex === index ? 'active' : ''"
            @click="changeCurrentIndex(index)"
            class="btn"
          >
            {{ item.extra.operationResource.categoryName }}
          </span>
        </div>
      </div>
    </van-sticky>
    <div v-show="scene">
      <!--banner轮播-->
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item v-for="item in homeStore.focusList" :key="item.id"
          ><img :src="item.picUrl" alt="" v-lazy='item.picUrl'
        /></van-swipe-item>
      </van-swipe>
      <!--iconbar-->
      <div class="iconbar">
        <div
          class="iconItem"
          v-for="(icon, index) in homeStore.policyDescList"
          :key="index"
        >
          <img :src="icon.icon" alt="" v-lazy='icon.icon' />
          <p>{{ icon.desc }}</p>
        </div>
      </div>
      <!--分类Icon-->
      <div class="categoryIcon">
        <div
          class="categoryIcon_item"
          v-for="(item, index) in homeStore.kingKongList"
          :key="index"
          @click="toCategoryDetial(item.schemeUrl)"
        >
          <img :src="item.picUrl" alt="" v-lazy='item.picUrl' />
          <p>{{ item.text }}</p>
        </div>
      </div>
      <!--新人专享礼界面-->
      <div class="moduelTitle">- 新人专享礼 -</div>
      <div class="content">
        <div class="left">
          <div class="name">新人专享礼包</div>
          <img src="../../assets/images/XRZXL.png" alt="" class="img" />
        </div>
        <div class="right">
          <div
            class="activeitem"
            v-for="(item, index) in homeStore.indexActivityModule"
            :key="index"
          >
            <div class="title">{{ item.title }}</div>
            <div class="subtitle">{{ item.subTitle }}</div>
            <img :src="item.picUrl" alt="" class="activeimg" v-lazy='item.picUrl' />
            <div class="price">
              <span>{{ item.activityPrice }}</span>
              <span style="text-decoration: line-through">{{
                item.originPrice
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--热销类目标题-->
      <div class="moduelTitle2">
        {{ homeStore.categoryHotSellModule.title }}
      </div>
      <!--热销类目头部-->
      <div class="sellHotTop">
        <div
          class="sellHotTop_item"
          v-for="(item, index) in homeStore.categoryList"
          :key="index"
          v-show="index < 2"
        >
          <div class="rank">
            <div class="rankName">{{ item.categoryName }}</div>
            <div class="line"></div>
          </div>
          <img :src="item.picUrl" alt="" class="img" v-lazy='item.picUrl' />
        </div>
      </div>
      <!--热销类目底部-->
      <div class="sellHotBottom">
        <div
          class="sellHotBottom_item"
          v-for="(item, index) in homeStore.categoryList"
          :key="index"
          v-show="index > 1"
        >
          <div class="rankname">{{ item.categoryName }}</div>
          <img :src="item.picUrl" alt="" class="img" v-lazy='item.picUrl' />
        </div>
      </div>
      <!--场景-->
      <div class="sceneLight">
        <div
          class="sceneLightItem"
          :style="{
            backgroundImage: 'url(' + homeStore.styleBanner.picUrl + ')',
          }"
        >
          <div class="title">{{ homeStore.styleBanner.title }}</div>
          <div class="desc">{{ homeStore.styleBanner.desc }}</div>
        </div>
        <div class="sceneLightItem">
          <div class="title" style="font-size: 14px">
            {{ homeStore.styleItem.title }}
          </div>
          <div class="desc" style="color: #ff6f0f">
            {{ homeStore.styleItem.desc }}
          </div>
          <img
            :src="img"
            alt=""
            class="img"
            v-for="(img, index) in homeStore.styleItem.picUrlList"
            :key="index"
            v-lazy='img'
          />
        </div>
      </div>
      <div class="bottom">
        <div class="btn">
          <button style="margin-right: 25px">下载APP</button>
          <button>电脑版</button>
        </div>
        <div class="icon">
          <div></div>
        </div>
        <div class="copyright">
          网易公司版权所有 © 1997-
          <br />
          食品经营许可证：JY13301080111719
        </div>
      </div>
    </div>
    <Recommend v-show="scene === false" :categoryId="categoryId"></Recommend>
  </div>
</template>
<script lang="ts">
import { onMounted, ref } from "@vue/runtime-core";
import { useHomeStore } from "../../stores/home";
import HxmHeader from "./header.vue";
import Recommend from "./recommend.vue";
import { useRouter } from "vue-router";
export default {
  name: "Home",
};
</script>

<script setup lang="ts">
//仓库
const homeStore = useHomeStore();
//路由器
const router = useRouter();
//navbar高亮
let currentIndex = ref(-1);
//控制下拉框
let pull = ref(false);
//控制场景切换
let scene = ref(true);
//获取分类id
let categoryId: any = ref("");
//点击修改navbar高亮
let changeCurrentIndex = (index: number, category: string) => {
  currentIndex.value = index;
  categoryId.value = category;
  scene.value = index === -1 ? true : false;
};
//点击修改下拉框显示与隐藏
let changePull = () => {
  pull.value = !pull.value;
};
onMounted(() => {
  //获取home界面数据
  homeStore.getHomeData();
});
//跳转分类详情页
const toCategoryDetial = (url: string) => {
  let urlCategoryId = url.split("?");
  router.push(`/list?${urlCategoryId[1]}`);
};
</script>

<style scoped>
.main {
  width: 375px;
  position: relative;
  overflow: hidden;
}
.my-swipe .van-swipe-item {
  width: 375px;
  height: 185px;
}
.my-swipe .van-swipe-item img {
  width: 375px;
  height: 185px;
  display: block;
}
.navbar {
  width: 375px;
  height: 30px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
  background: #fff;
}
.navbar ul {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  height: 30px;
  justify-content: space-between;
}
.navbar ul .item {
  width: 72px;
  height: 30px;
  text-align: center;
  font-size: 12px;
  line-height: 30px;
  box-sizing: border-box;
  padding: 0 8px;
}
.navbar ul .item.active {
  border-bottom: 1px solid #dd1a21;
}
.navbar::-webkit-scrollbar, .navbar ul::-webkit-scrollbar{
  /*隐藏滚动条*/
  display: none;
}
.navbar .pull {
  width: 50px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 16px;
  background: #fff;
  text-align: center;
  line-height: 30px;
  z-index: 999;
  opacity: .8;
}
.pullmenu {
  width: 375px;
  height: 215px;
  position: absolute;
  top: 44px;
  left: 0;
  font-size: 12px;
  z-index: 999999;
  background: #fff;
}
.pullmenu .top {
  width: 375px;
  height: 30px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pullmenu .menu {
  width: 375px;
  height: 185px;
  background: #fff;
  box-sizing: border-box;

  display: flex;
  flex-wrap: wrap;
  padding-top: 12px;
}
#avtive.btn {
  border: 1px solid #dd1a21;
  color: #dd1a21;
}
.pullmenu .menu .btn {
  width: 75px;
  height: 28px;
  display: block;
  margin: 0 0 20px 15px;
  background: #fafafa;
  line-height: 28px;
  text-align: center;
  border: 1px solid #fff;
}
.pullmenu .menu #active {
  border: 1px solid #dd1a21;
  color: #dd1a21;
}
.iconbar {
  width: 375px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconbar .iconItem {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.iconbar .iconItem img {
  width: 16px;
  height: 16px;
  display: block;
  margin-right: 5px;
}
.categoryIcon {
  width: 375px;
  height: 174.5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.categoryIcon .categoryIcon_item {
  flex: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.categoryIcon .categoryIcon_item img {
  width: 55px;
  height: 55px;
}
.categoryIcon .categoryIcon_item p {
  margin-top: 5px;
}
.moduelTitle {
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  width: 375px;
  height: 45px;
  align-items: center;
}
.content {
  width: 375px;
  box-sizing: border-box;
  height: 219px;
  padding-left: 10px;
  display: flex;
  justify-content: center;
}
.content .left {
  width: 171.5px;
  height: 217px;
  position: relative;
  background: #f9e9cf;
}
.content .left .name {
  width: 171.5px;
  box-sizing: border-box;
  padding: 15px 0 0 15px;
  font-size: 16px;
}
.content .left .img {
  width: 129px;
  height: 129px;
  position: absolute;
  top: 50px;
  left: 15px;
}
.content .right {
  width: 171.5px;
  height: 217px;
  font-size: 12px;
  display: flex;
  color: #333;
  margin-left: 5px;
  flex-direction: column;
}
.content .right .activeitem {
  flex: 50%;
  position: relative;
  background: #fbe2d3;
  margin-bottom: 2px;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px 0 0 15px;
}
.content .right .activeitem .title {
  font-size: 16px;
  z-index: 999;
  position: relative;
}
.content > .right > .activeitem > .activeimg {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
}
.content .right .activeitem .price {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 12px;
  background: #f59524;
}
.moduelTitle2 {
  width: 375px;
  height: 45px;
  box-sizing: border-box;
  padding: 0 15px;
  font-size: 16px;
  line-height: 45px;
}
.sellHotTop {
  width: 375px;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  padding-left: 15px;
  justify-content: center;
}

.sellHotTop .sellHotTop_item {
  width: 170px;
  height: 100px;
  box-sizing: border-box;
  margin: 0 5px 5px 0;
  position: relative;
  background: #f9f3e4;
}
.sellHotTop .sellHotTop_item:nth-child(even) {
  background: #ebeff6 !important;
}
.sellHotTop .sellHotTop_item .rank {
  position: absolute;
  width: 72px;
  height: 30px;
  top: 40px;
  left: 9px;
}
.sellHotTop .sellHotTop_item .rank .rankName {
  font-size: 14px;
  margin-bottom: 5px;
}
.sellHotTop .sellHotTop_item .rank .line {
  width: 30px;
  height: 2px;
  background: #333;
}
.sellHotTop .sellHotTop_item .img {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.sellHotBottom {
  width: 375px;
  height: 205px;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 10px 15px;
  margin: 5px;
}
.sellHotBottom .sellHotBottom_item {
  width: 82.5px;
  height: 90px;
  box-sizing: border-box;
  margin: 0 5px 5px 0;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  justify-content: center;
  align-items: center;
}
.sellHotBottom .sellHotBottom_item .img {
  width: 60px;
  height: 60px;
}
.sceneLight {
  width: 375px;
  height: 155px;
  box-sizing: border-box;
  padding: 5px 15px 15px 13px;
  margin: 0 0 10px;
  display: flex;
}
.sceneLight div {
  box-sizing: border-box;
}
.sceneLightItem {
  width: 171.5px;
  height: 132px;
  font-size: 12px;
  margin: 2px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 10px;
  position: relative;
}
.sceneLightItem .title {
  width: 161.5px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  padding-left: 5px;
}
.sceneLightItem .desc {
  width: 161.5px;
  height: 18px;
  line-height: 18px;
  padding-left: 5px;
  color: #7f7f7f;
}
.sceneLightItem .img {
  width: 75px;
  height: 75px;
}
.sceneLightItem .img:nth-last-child(2n-1) {
  position: absolute;
  right: 0;
  bottom: 0;
}
.bottom {
  width: 375px;
  height: 172px;
  position: relative;
  padding: 27px 10px 14px;
  background: #414141;
  font-size: 12px;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}
.bottom div {
  box-sizing: border-box;
}
.bottom .btn {
  width: 355px;
  height: 31px;
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom .btn button {
  width: 86px;
  height: 31px;
  background: #414141;
  padding: 0;
  margin: 0;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 12px;
}
.bottom .icon {
  width: 56px;
  height: 40px;
  position: absolute;
  right: 0;
  bottom: 120px;
}
.bottom .icon div {
  width: 56px;
  height: 40px;
  background: url(../../assets/images/logo.png);
  background-size: 188px 188px;
  background-position: -63px -126px;
}
</style>